<template>
	<div>
		<cl-drawer
			ref="drawer"
			:props="{
				title: '事件列表',
				appendToBody: true,
				size: '650px'
			}"
			@close="reset"
            @confirm="submit"
            showConfirm
			:saving="saving"
		>
            <el-form ref="form" label-position="top" :model="form" :rules="rules">
                <el-form-item label="事件类型" prop="event_type">
                    <el-radio-group v-model="form.event_type">
                        <el-radio label="1">消息事件</el-radio>
                        <el-radio label="2">进入会话事件</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.event_type == 1" label="匹配内容" prop="msg_content">
                    <el-input v-model.trim="form.msg_content" placeholder="填*匹配所有" />
                </el-form-item>
                <el-form-item label="消息模板" prop="msg_id">
                    <cl-select
                        v-model="form.msg_id"
                        placeholder="请选择消息模板"
                        filterable
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in msgList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                        />
                    </cl-select>
                </el-form-item>
            </el-form>
		</cl-drawer>
	</div>
</template>
<script>

import eventForm from './event-form.vue';

export default {
	name: "servicer-event",
	components: {
        eventForm
	},
	data() {
		return {
            saving: false,
			visible: false,
			editing: false,
			form: {
				biz_id: "",
				open_kfid: "",
				id: "",
				event_type: "",
				msg_content: "",
				msg_id: ""
			},
			rules: {
				
			},
            msgList: []
		};
	},
	computed: {
	},
	created() {
		
	},
	methods: {
		async open(editing, data = {}) {
            this.editing = editing
            if (editing) {
				Object.keys(this.form).forEach(k => {
					data[k] != undefined && (this.form[k] = data[k]);
				});
			}
            else {
                this.form.biz_id = data.biz_id
                this.form.open_kfid = data.open_kfid
            }
            
            console.log(this.form, 'event-form-open')
			this.$refs.drawer.create(async () => {
				this.init();
			});
		},
		async init() {
            this.getMsgList()
		},
		async getDetail() {
			
		},
        async getMsgList() {
            this.msgList = await this.$service.servicerMsg.list({ biz_id: this.form.biz_id })
            console.log(this.msgList, 'getmsglist')
        },
        openForm() {
            this.$refs.form.open()
        },
		close() {
            this.reset();
			this.$refs.drawer.close();
		},
        async submit() {
            await this.$service.servicer[this.editing ? 'editEvent' : 'addEvent'](this.form)
			this.$emit('confirm')
			this.close()
        },
		reset() {
            this.form = {
				biz_id: "",
				open_kfid: "",
				id: "",
				event_type: "",
				msg_content: "",
				msg_id: ""
			}
		},
	}
};
</script>

<style lang="scss" scoped>

</style>
